﻿<sdk:ChildWindow
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:gui="clr-namespace:EarthWatchers.SL.GUI.Controls"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="EarthWatchers.SL.GUI.Controls.TutorialGameWindow" 
    Width="520" 
    Padding="0"
    HasCloseButton="False"
    Style="{StaticResource GPChildWindow}"
    Title="Jugar">
    <sdk:ChildWindow.Resources>
        
    </sdk:ChildWindow.Resources>
    <Grid>
        <Grid.Background>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="White" Offset="0.9"></GradientStop>
                <GradientStop Color="#FFe0e0e0" Offset="1"></GradientStop>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="70"/>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Border Height="70" VerticalAlignment="Top" CornerRadius="8,8,0,0" BorderThickness="1" BorderBrush="#FF95a92c">
            <Border.Background>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" Opacity="0.8">
                    <GradientStop Color="#FF849b0c" Offset="0" />
                    <GradientStop Color="#FF9fba0e" Offset="0.5" />
                    <GradientStop Color="#FF849b0c" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="140" />
                    <ColumnDefinition/>
                    <ColumnDefinition Width="28"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Image Source="../../Resources/Images/user.png" Margin="10,2,0,0" HorizontalAlignment="Left" Stretch="None" />

                <StackPanel Grid.Row="1" Orientation="Vertical" Grid.Column="0" Margin="0" VerticalAlignment="Center">
                    <TextBlock x:Name="txtName" FontWeight="Bold" Margin="10,0,10,0" FontSize="11" LineHeight="12" LineStackingStrategy="BlockLineHeight" TextWrapping="Wrap" Foreground="White" />
                    <TextBlock x:Name="txtCountry" FontSize="11" Margin="10,0,10,0" LineHeight="12" LineStackingStrategy="BlockLineHeight" TextWrapping="Wrap" Foreground="White" />
                </StackPanel>

                <TextBlock x:Name="Title" Text="Imágenes de Color Real" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Center" Grid.Column="1" FontSize="18" Foreground="White" FontFamily="Arial" FontWeight="Bold" Margin="0,5,0,0" />
                <Button x:Name="CloseButton" Click="BtnCloseClick" Grid.Column="2" HorizontalAlignment="Center" IsTabStop="False" Style="{StaticResource OpacityButton}" Width="24" Margin="5,7,0,0" VerticalAlignment="Top">
                    <Path Data="M0,0 L1,1 M0,1 L1,0" Stretch="Fill" Stroke="#404040" StrokeThickness="2" Width="10" Height="10" Effect="{StaticResource ControlTextEffect}" />
                </Button>
            </Grid>
        </Border>
        
        <Grid x:Name="Step1" Grid.Row="1" Margin="5" Visibility="Collapsed">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="Text1" Foreground="#FF333333" FontFamily="/EarthWatchers.SL;component/Resources/MyriadPro-Regular.otf#Myriad Pro" FontSize="14" Margin="6" TextWrapping="Wrap">
                <Run FontWeight="Bold" FontSize="14">¡Bienvenido!</Run>
                <LineBreak />
                <LineBreak />Guardianes del Bosque utiliza imágenes satelitales de diversos proveedores, tomadas periódicamente. En este caso nos enfocaremos en las imagenes de color real del satélite Landsat 7.
                <LineBreak /><LineBreak />Una imagen de color real muestra una representación de la tierra con los colores naturales de cada objeto, como una fotografía normal.
                <LineBreak /><LineBreak />¡Aprendamos a buscar deforestación usando estas imágenes!
            </TextBlock>
            <TextBlock x:Name="Text2" Visibility="Collapsed" Foreground="#FF333333" FontFamily="/EarthWatchers.SL;component/Resources/MyriadPro-Regular.otf#Myriad Pro" FontSize="14" Margin="6" TextWrapping="Wrap">
                <Run FontWeight="Bold" FontSize="14">¡A tener en cuenta!</Run>
                <LineBreak />
                <LineBreak />Las imágenes del satélite Landsat 7 que utilizaremos tienen un error óptico. En la imagen se pueden observar las líneas que componen la falla.
                <LineBreak /><LineBreak />Aún con dicha falla, podremos buscar deforestación.
            </TextBlock>
            
            <Image Source="../../Resources/Images/juego1-1.png" Stretch="None" Grid.Column="1" />
        </Grid>

        <Grid x:Name="Step2" Grid.Row="1" Margin="5" Visibility="Collapsed">
            <TextBlock TextAlignment="Center" Foreground="#FF333333" FontFamily="/EarthWatchers.SL;component/Resources/MyriadPro-Regular.otf#Myriad Pro" FontSize="14" Margin="6" TextWrapping="Wrap">
                <Run FontWeight="Bold" FontSize="17">¡A jugar!</Run>
                <LineBreak />
                <LineBreak />Ahora que sabes de qué se tratan las imágenes de color real, vamos a ponernos en práctica.
                <LineBreak /><LineBreak />A continuación, buscá en las imagenes las zonas que presenten cambios. Cuantos más aciertos tengas, ¡más puntos vas a ganar!
            </TextBlock>
        </Grid>

        <Grid x:Name="Step3" Grid.Row="1" Margin="5" Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock TextAlignment="Center" Text="¡Encontrá los cambios!" FontWeight="Bold" Foreground="#FF333333" FontFamily="/EarthWatchers.SL;component/Resources/MyriadPro-Regular.otf#Myriad Pro" FontSize="17" Margin="6" TextWrapping="Wrap" />
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Image x:Name="Image1" Cursor="Hand" MouseLeftButtonDown="Image_MouseLeftButtonDown" Stretch="None" Grid.Column="0" />
                <Image x:Name="Image2" Cursor="Hand" MouseLeftButtonDown="Image_MouseLeftButtonDown" Stretch="None" Grid.Column="1" />
            </Grid>
            <TextBlock TextAlignment="Center" Grid.Row="2" Foreground="#FF333333" FontFamily="/EarthWatchers.SL;component/Resources/MyriadPro-Regular.otf#Myriad Pro" FontSize="14" Margin="6" TextWrapping="Wrap">
                Mirá detenidamente las dos imágenes. ¿Podes ver los cambios?
                <LineBreak /><LineBreak />Hacé click en la imagen que presente deforestación.
            </TextBlock>
        </Grid>

        <Grid x:Name="Step4" Grid.Row="1" Margin="5" Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock TextAlignment="Center" Text="Resultados" FontWeight="Bold" Foreground="#FF333333" FontFamily="/EarthWatchers.SL;component/Resources/MyriadPro-Regular.otf#Myriad Pro" FontSize="17" Margin="0,6,0,20" TextWrapping="Wrap" />
            <Grid Grid.Row="1" HorizontalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Image x:Name="Tree1" Stretch="None" Grid.Column="0" Margin="5" />
                <Image x:Name="Tree2" Stretch="None" Grid.Column="1" Margin="5" />
                <Image x:Name="Tree3" Stretch="None" Grid.Column="2" Margin="5" />
                <TextBlock HorizontalAlignment="Center" Margin="15" Text="=" VerticalAlignment="Center" Foreground="#FF333333" Grid.Column="3" FontFamily="/EarthWatchers.SL;component/Resources/MyriadPro-Regular.otf#Myriad Pro" FontSize="20" />
                <TextBlock x:Name="PointsText" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Foreground="#FF333333" Grid.Column="4" FontFamily="/EarthWatchers.SL;component/Resources/MyriadPro-Regular.otf#Myriad Pro" FontSize="20" />
            </Grid>

            <TextBlock x:Name="ResultText" TextAlignment="Center" Grid.Row="2" Foreground="#FF333333" FontFamily="/EarthWatchers.SL;component/Resources/MyriadPro-Regular.otf#Myriad Pro" FontSize="14" Margin="0,20,0,10" TextWrapping="Wrap">
                ¡Bien! Lograste encontrar deforestación. Para ser un experto, volvé a jugar hasta encontrar todos los casos y vas a ganar mas puntos.
            </TextBlock>

            <TextBlock TextAlignment="Center" Grid.Row="3" Foreground="#FF333333" FontFamily="/EarthWatchers.SL;component/Resources/MyriadPro-Regular.otf#Myriad Pro" FontSize="14" Margin="0,5,0,10" TextWrapping="Wrap">
                No olvides compartir con tus amigos para que ellos también sean Guardianes del Bosque
            </TextBlock>
            
            <Grid Grid.Row="4" HorizontalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Image x:Name="FacebookIcon" Margin="10" Source="../../Resources/Images/facebook2.png" Stretch="None" Cursor="Hand" MouseLeftButtonDown="Facebook_MouseLeftButtonDown" />
                <Image x:Name="TwitterIcon" Margin="10" Source="../../Resources/Images/twitter2.png" Stretch="None" Grid.Column="1" Cursor="Hand" MouseLeftButtonDown="Twitter_MouseLeftButtonDown" />
            </Grid>
        </Grid>
        <Button x:Name="NextButton" HorizontalAlignment="Right" Style="{StaticResource GreenButton}" Grid.Row="2" Width="170" Height="35" Foreground="White" FontSize="15" FontWeight="Bold" Content="CONTINUAR >>" Margin="10" Click="NextButton_Click" />
        
    </Grid>
</sdk:ChildWindow>